<template>
    <div>
        <el-button type="primary" @click="dialogVisible = true" style="margin-left: 16px" class="bt">点击注册</el-button>
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
            <el-form v-model="zhuce">
                <el-form-item>
                    <el-input v-model="zhuce.zcname" placeholder="请输入姓名" @input="change($event)" />
                </el-form-item>
                <el-form-item>
                    <el-input v-model="zhuce.username" placeholder="请输入用户名" :error-message="usernamemsg" @input="change($event)" />
                </el-form-item>
                <el-form-item>
                    <el-input
                        v-model="zhuce.password"
                        type="password"
                        placeholder="请输入密码"
                        error-message="密码格式错误"
                        @input="change($event)"
                    />
                </el-form-item>
                <el-form-item>
                    <el-input v-model="zhuce.phone" placeholder="请输入手机号" error-message="手机号格式错误" @input="change($event)" />
                </el-form-item>
                <el-form-item>
                    <el-input
                        v-model="zhuce.code"
                        center
                        placeholder="请输入短信验证码"
                        error-message="验证码格式错误"
                        @input="change($event)"
                    >
                        <el-button slot="button" type="primary">发送验证码</el-button>
                    </el-input>
                </el-form-item>

                <el-button type="primary" @click="GetSucces()" class="zc"> 注册</el-button>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 用户信息 -->
        <el-table :data="ZData" border style="width: 100%">
            <el-table-column prop="username" label="用户名"> </el-table-column>
            <el-table-column prop="zcname" label="用户姓名"> </el-table-column>
            <el-table-column prop="userId" label="用户编号"> </el-table-column>
            <el-table-column prop="phone" label="手机号"> </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button class="AA" @click="handleClicks(scope.row), (drawer_2 = true)" type="primary">编辑</el-button>
                    <el-drawer :visible.sync="drawer_2" :with-header="false">
                        <div><h1>项目信息</h1></div>
                        <el-form v-model="information">
                            <el-form-item label="用户名" :label-width="formLabelWidth">
                                <el-input v-model="information.userId" autocomplete="off" @input="change($event)"></el-input>
                            </el-form-item>
                            <el-form-item label="原密码" :label-width="formLabelWidth">
                                <el-input
                                    type="password"
                                    v-model="information.password"
                                    autocomplete="off"
                                    @input="change($event)"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="新密码" :label-width="formLabelWidth">
                                <el-input
                                    type="password"
                                    v-model="information.Newpassword"
                                    autocomplete="off"
                                    @input="change($event)"
                                ></el-input>
                            </el-form-item>
                            <el-button type="primary" @click="GetAdd2()">确定</el-button>
                        </el-form>
                        <!--  权限选择   -->
                        <div><h1>权限</h1></div>
                        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                        <div style="margin: 15px 0"></div>
                        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                            <el-checkbox v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox>
                        </el-checkbox-group>
                    </el-drawer>
                    <el-button class="AA" type="primary" @click="SetClear3()">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>



<script>
export default {
    data(){
        return {
            dialogVisible: false,
            //权限
            isIndeterminate: true,
            checkAll: false,
            //注册
            zhuce: {
                userId: '0002',
                zcname: '',
                username: '',
                password: '',
                phone: '',
                code: ''
            },
            //已注册
            ZData: [
                {
                    userId: '0001',
                    username: '1212121',
                    password: '212121',
                    phone: '12121212112',
                    zcname: '阿三'
                }
            ],
            //修改信息
            information: [],
        }
    },
    methods:{
        //修改成功
        GetAdd2() {
            if (this.information.Newpassword == this.information.password) {
                this.$message({
                    message: '不能与原密码相同',
                    type: 'success'
                });
            } else {
                this.ZData.password = this.information.Newpassword;
                this.$message({
                    message: '修改成功',
                    type: 'success'
                });
                var txts = document.getElementsByTagName('input');
                for (var i = 0; i < txts.length; i++) {
                    if (txts[i].type === 'text' || txts[i].type === 'checkbox') {
                        txts[i].value = '';
                    }
                }
            }
        },

        //删除
        SetClear2() {
            // this.comName.splice(this.b, 1);
            for (let i = 0; i < this.zhuce.length; i++) {
                this.active = this.tableData[i];
                this.tableData.splice(this.active, 1);
            }
        },
        //注册
        GetSucces() {
            if (this.username == '' || this.password == '') {
                this.$message({
                    message: '请输入用户名或密码',
                    type: 'error'
                });
            } else {
                this.ZData.push(this.zhuce);
                this.$message({
                    message: '注册成功',
                    type: 'success'
                });
                var txts = document.getElementsByTagName('input');
                for (var i = 0; i < txts.length; i++) {
                    if (txts[i].type === 'text' || txts[i].type === 'checkbox') {
                        txts[i].value = '';
                    }
                }
            }
        },
    }
};
</script>

<style>
.zc {
    margin: 10px;
    float: right;
}
.dialog-footer {
    display: flex;
    margin-top: 13px;
}
.AA {
    float: left;
    margin-left: 10%;
}
</style>